<template>
    <div>
        <ShowNames :names="names">
            <template v-slot:default="slotProps">
                <!-- 这是默认插槽 -->
                <!-- 设置作用域插槽 -->
                <button>{{ slotProps.index }}-{{ slotProps.item }}</button>
            </template>
            <!-- 设置具名插槽 -->
            <template v-slot:center>
                center
            </template>
            <!-- 设置具名插槽简写v-slot:代替# -->
            <template #bottom>
                bottom
            </template>
        </ShowNames>
        <br />

        <!-- 若是默认插槽,可以简写,将template去掉 -->
        <ShowNames :names="names" v-slot:default="slotProps">
            <!-- 设置作用域插槽 -->
            <button>{{ slotProps.index }}-{{ slotProps.item }}</button>
        </ShowNames>
    </div>
</template>

<script>
import ShowNames from './ShowNames.vue'
export default {
    components: { ShowNames },
    data() {
        return {
            names: ["why", "kobe", "james", "curry"]
        }
    }
}
</script>

<style lang="scss" scoped>
</style>